<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head th:replace="admin/_fragments :: head(~{::title})">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>博客管理</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/semantic-ui/2.2.4/semantic.min.css">
    <link rel="stylesheet" href="../../static/css/me.css">
</head>
<body>

    <!-- 导航 -->
    <nav th:replace="admin/_fragments :: menu(1) " class="ui inverted attached segment m-padded-tb-mini">
        <div class="ui container">
            <!--响应移动端，堆叠-->
            <div class="ui inverted secondary stackable menu">
                <h2 class="ui teal header item">Blog</h2>
                <a href="#" class="m-item item m-mobile-hide"><i class="home icon"></i>博客</a>
                <a href="#" class="m-item item m-mobile-hide"><i class="idea icon"></i>分类</a>
                <a href="#" class="m-item item m-mobile-hide"><i class="tags icon"></i>标签</a>
                 <div class="m-item item right menu">
                     <div class="ui dropdown item">
                         <div class="text">
                             <img src="../static/images/touxiang.jpg" alt="" class="ui avatar image">
                             洗洗麦
                         </div>
                         <i class="dropdown icon"></i>
                         <div class="menu">
                             <a href="#" class="item">注销</a>
                             <a href="#" class="item">切换登录</a>
                         </div>
                     </div>
                 </div>
             </div>
         </div>
    </nav>

    <div class="ui attached pointing menu">
        <div class="ui container">
            <div class="right menu">
                <a href="#" class="item" th:href="@{/admin/blog/input}" style="color: purple" >发布</a>
                <a href="#" class="active teal item">列表</a>
            </div>
        </div>
    </div>

    <!-- 中间内容 -->
    <div class="m-container-small m-padded-tb-big">
        <div class="ui container">
            <form action="#" method="post" class="ui secondary segment  form" th:action="@{/admin/blog/search}">
                <input type="hidden" name="page">
                <div class="inline fields">
                    <div class="ui field">
                        <input type="text" name="title" placeholder="标题">
                    </div>
                    <div class="ui field">
                        <div class="ui selection dropdown">
                            <input type="hidden" name="typeId">
                            <i class="dropdown icon"></i>
                            <div class="default text">分类</div>
                            <div class="menu">
                                <div th:each="type : ${types}" th:data-value="${type.id}" th:text="${type.name}" class="item" data-value="1">学习历程</div>

                            </div>
                        </div>
                    </div>
                    <div class="ui field">
                        <div class="ui checkbox">
                            <input type="checkbox" id="recommend" name="recommend">
                            <label for="recommend">推荐</label>
                        </div>
                    </div>
                    <div class="field">
                        <button type="sumbit" id="search-btn" class="ui mini purple basic button"><i class="search icon"></i>搜索</button>
                    </div>
                </div>
            </form>
            <div id="#table-container">
                <table th:fragment="blogList" class="ui compact teal table">
                    <thead>
                    <tr >
                        <th>序号</th>
                        <th>标题</th>
                        <th>类型</th>
                        <th>推荐</th>
                        <th>更新时间</th>
                        <th>操作</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr th:each="blog : ${pageInfo.list}">
                        <td th:text="${blog.id}">1</td>
                        <td th:text="${blog.title}">Java入门</td>
                        <td th:text="${blog.getType().name}">学习编程</td>
                        <td th:text="${blog.recommend} ? '是':'否'">是</td>
                        <td th:text="${#dates.format(blog.updateTime,'yyyy-MM-dd')}">2020</td>
                        <td>
                            <a href="#" th:href="@{/admin/blog/{id}/edit/(id=${blog.id})}" class="ui mini teal basic  button">编辑</a>
                            <a href="#" th:href="@{/admin/blog/{id}/delete/(id=${blog.id})}" onclick="return confirm('您确定要删除吗？')" class="ui mini red basic button">删除</a>
                        </td>
                    </tr>
                    </tbody>
                    <!--footer-->
                    <tfoot>
                    <tr>
                        <th colspan="6" >
                            <div class="ui mini pagination menu" th:if="${pageInfo.pages}>1">
                                <a class="item" th:href="@{/admin/blog}">首页</a>
                                <a class="item" th:href="@{/admin/blog(pageNum=${pageInfo.hasPreviousPage}?${pageInfo.prePage}:1)}" >上一页</a>
                                <a class="item" th:href="@{/admin/blog(pageNum=${pageInfo.hasNextPage}?${pageInfo.nextPage}:${pageInfo.pages})}" >下一页</a>
                                <a class="item" th:href="@{/admin/blog(pageNum=${pageInfo.pages})}" >尾页</a>
                            </div>
                            <div class="ui segment m-inline-block">
                                <p >当前第<span th:text="${pageInfo.pageNum}"></span>页，总<span th:text="${pageInfo.pages}"></span>页，共<span th:text="${pageInfo.total}"></span>条记录</p>
                            </div>
                            <a href="#" th:href="@{/admin/blog/input}" class="ui mini blue right floated  basic button"> 新增</a>
                        </th>
                    </tr>
                    </tfoot>
                    <div class="ui success message" th:unless="${#strings.isEmpty(message)}">
                        <i class="close icon"></i>
                        <div class="header">提示</div>
                        <p th:text="${message}">操作成功</p>
                    </div>
                </table>
            </div>
        </div>
    </div>


    <!-- 底部footer-->
    <footer th:replace="admin/_fragments :: footer" class="ui inverted vertical segment m-padded-tb-massive">
        <div class="ui center aligned container">
            <div class="ui inverted divided stackable grid">
                <div class="three wide column">
                    <div class="ui inverted link list">
                        <div class="item">
                            <img src="../static/images/saoma.jpg" th:src="@{/images/saoma.jpg}" class="ui rounded image" alt="" style="width: 120px">
                        </div>
                    </div>
                </div>
                <div class="three wide column">
                    <h4 class="ui inverted header m-opacity-mini">最新博客</h4>
                    <div class="ui inverted link list">
                        <a href="#" class="item">java</a>
                        <a href="#" class="item">redis</a>
                        <a href="#" class="item">mysql</a>
                    </div>
                </div>
                <div class="four wide column">
                    <h4 class="ui inverted header m-opacity-mini">联系我</h4>
                    <div class="ui inverted link list">
                        <a href="#" class="item">QQ:1147857572</a>
                        <a href="#" class="item">E-mail:xiximai18566025953@163.com</a>

                    </div>
                </div>
                <div class="six wide column">
                    <h4 class="ui inverted header m-opacity-mini">最新博客</h4>
                    <p class="m-text-thin m-text-spaced m-text-lined m-opacity-mini">这是我的个人博客、会分享关于编程、写作、思考相关的任何内容，希望可以给来到这儿的人帮助</p>
                </div>
            </div>
            <div class="ui inverted section divider"></div>
            <p class="m-text-thin m-text-spaced m-text-lined m-opacity-mini">Copyright © 2019 - 2020  Designed by xiximai</p>
        </div>
    </footer>

    <!--/*/<th:block th:replace="_fragments :: script">/*/-->
    <script src="https://cdn.jsdelivr.net/npm/jquery@3.2/dist/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/semantic-ui/2.2.4/semantic.min.js"></script>
    <!--/*/</th:block>/*/-->
    <script>
        $('.menu.toggle').click(function () {
            $('.m-item').toggle('m-mobile-hide');
        });

        $('#payButton').popup({
            popup : $('.payQR.popup'),
            on : 'click',
            position : 'bottom center'
        });
        $('.dropdown').dropdown({
            on : 'hover'
        });
        //获取自定义属性data下page的值
        function page(obj) {
            $("[name='page']").valueOf($(obj).data("page"));
            loaddata();
        }
        $("#search-btn").click(function () {
            $("[name='page']").val(0);
            loaddata();
        })
        function loaddata() {
            $("#table-container").load(/*[[@{/admin/blog/search}]]*/"/admin/blog/search",{
                title : $("[name='title']").val(),
                typeId : $("[name='typeId']").val(),
                recommend : $("[name='recommend']").prop('checked'),
                page :$("[name='page']").val()
            });
        };
        //操作反馈消息
        //消息提示关闭初始化
        $('.message .close')
            .on('click', function () {
                $(this)
                    .closest('.message')
                    .transition('fade');
            });
    </script>
</body>
</html>